<template>
  <div class="container" v-if="systemInfo.name != '防疫防控管理平台'">
    <div class="navigate-bar">
      <span class="navigate-icon">
        <el-tooltip effect="dark" content="数据模式" placement="bottom">
          <i
            class="el-icon-menu"
            :style="{ color: homeType == '数据模式' ? '#29c093' : '#1a1a1a' }"
            @click="toClickHomeType('数据模式')"
          ></i>
        </el-tooltip>
        <el-tooltip effect="dark" content="地图模式" placement="bottom">
          <i
            class="el-icon-map-location"
            :style="{ color: homeType == '地图模式' ? '#29c093' : '#1a1a1a' }"
            @click="toClickHomeType('地图模式')"
          ></i>
        </el-tooltip>

        <!-- <el-tooltip effect="dark" content="地图模式1" placement="bottom">
          <i
            class="el-icon-map-location"
            :style="{ color: homeType == '地图模式1' ? '#29c093' : '#1a1a1a' }"
            @click="toClickHomeType('地图模式1')"
          ></i>
        </el-tooltip> -->
      </span>
      <span style="flex: 1">
        <el-button
          size="mini"
          type="primary"
          plain
          style="
            padding: 6px 15px;
            float: right;
            margin-right: 15px;
            font-size: 13px;
          "
          v-if="homeType == '数据模式'"
          @click="getData()"
          >刷新</el-button
        >
      </span>
    </div>
    <div class="content" v-show="homeType == '数据模式'">
      <div class="top">
        <div class="top-a">
          <div class="top-a-1">
            <div class="title">
              <div class="title-left">
                <span class="title-left-text">无线设备信息</span>
              </div>
              <div class="title-right">
                <div
                  v-for="(legend, index) in basicInfoLegend"
                  :key="index"
                  class="title-right-item"
                >
                  <div class="legend" :style="{ background: legend.color }" />
                  <div class="legend-text">
                    {{ legend.name }}
                  </div>
                </div>
              </div>
            </div>
            <div class="top-a-1-content">
              <div class="left">
                <div id="keyA" style="height: 88%" />
              </div>
              <div class="right">
                <div
                  class="right-item"
                  v-for="(data, index) in basicInfoDataList"
                  :key="index"
                >
                  <div class="item-img">
                    <img
                      :src="getImgSrc(`${data.imgName}.png`)"
                      alt=""
                      style="margin-top: 5px"
                    />
                  </div>
                  <div class="item-info">
                    <div style="flex: 1">
                      <span class="item-info-label">{{ data.name }}</span>
                      <span
                        class="item-info-value"
                        :style="{ color: data.color }"
                        >{{ data.value }}</span
                      >
                    </div>
                    <div style="flex: 1; margin-top: 3px">
                      <span class="item-info-rate">
                        {{
                          ChangeDecimalToPercentage(
                            data.value / basicInfoData['总数']
                          )
                        }}</span
                      >
                      <span class="item-info-rate" style="margin-left: 5px"
                        >占比</span
                      >
                    </div>
                  </div>
                </div>

                <div class="right-item">
                  <div class="item-img">
                    <img
                      :src="getImgSrc(`device_all_num.png`)"
                      alt=""
                      style="margin-top: 5px"
                    />
                  </div>
                  <div class="item-info">
                    <div style="flex: 1; display: flex; align-items: center">
                      <span class="item-info-label">设备总数</span>
                      <span
                        class="item-info-value"
                        style="margin-left: 8px; color: green"
                        >{{ basicInfoData['总数'] }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="top-a-2">
            <div class="title">
              <div class="title-left">
                <span class="title-left-text">无线设备详情</span>
              </div>
            </div>
            <div class="top-a-2-content">
              <div class="content-info">
                <div
                  class="info-item"
                  v-for="(data, index) in deviceRecordData"
                  :key="index"
                  :style="{
                    'margin-bottom':
                      index == deviceRecordData.length - 1 ? '0' : '10px',
                    'margin-right': index % 2 == 0 ? '2%' : '0',
                  }"
                >
                  <div class="info-item-content">
                    <div class="left-content">
                      <div class="label">
                        <img
                          :src="getDeviceDetailImg(data.name)"
                          alt=""
                          style="width: 16px; height: 16px"
                        />
                        <span class="text"> {{ data.name }}</span>
                      </div>
                      <div class="value">{{ data.total }}</div>
                    </div>
                    <div class="right-content">
                      <div class="normal-info">
                        <div class="normal-info-text">报警数量</div>
                        <div class="normal-info-value">
                          {{ data.warning }}
                        </div>
                      </div>
                      <div class="normal-info" style="margin-top: 6px">
                        <div
                          class="normal-info-text"
                          style="position: relative"
                        >
                          异常数量
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="异常数量=故障数量+隔离数量+离线数量"
                            placement="top"
                          >
                            <i
                              class="el-icon-question"
                              style="
                                position: absolute;
                                right: -15px;
                                top: 1px;
                                color: rgb(255, 153, 0);
                                cursor: pointer;
                              "
                            ></i>
                          </el-tooltip>
                        </div>

                        <div class="normal-info-value">
                          {{ data.fault + data.isIsolate + data.offLine }}
                        </div>
                      </div>
                      <div class="normal-info" style="margin-top: 6px">
                        <div class="normal-info-text">正常数量</div>
                        <div class="normal-info-value">{{ data.normal }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="deviceRecordData.length == 0"
                  style="text-align: center; width: 100%"
                >
                  暂无无线设备数据。
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="top-b">
          <div class="top-b-1">
            <div class="title">
              <div class="title-left">
                <span class="title-left-text">告警处理统计</span>
              </div>
              <div class="title-right-1">
                <div class="alarm-btn" @click="toClickType('今日告警')">
                  <span
                    class="alarm-text"
                    :style="
                      alarmStatisticsType == '今日告警' ? 'color:#467FF1' : ''
                    "
                  >
                    今日告警
                  </span>
                  <span
                    class="underline"
                    v-if="alarmStatisticsType == '今日告警'"
                  ></span>
                </div>
                <div class="alarm-btn" @click="toClickType('告警统计')">
                  <span
                    class="alarm-text"
                    :style="
                      alarmStatisticsType == '告警统计' ? 'color:#467FF1' : ''
                    "
                  >
                    全部告警
                  </span>
                  <span
                    class="underline"
                    v-if="alarmStatisticsType == '告警统计'"
                  ></span>
                </div>
              </div>
            </div>
            <div class="top-b-1-content">
              <div class="left">
                <div id="keyB" style="height: 100%" />
              </div>
              <div class="right">
                <div class="right-item">
                  <div class="right-item-value">
                    {{ alarmStatisticsObj.gCount1 }}
                  </div>
                  <div class="right-item-label">
                    <span style="color: #3675ff; font-size: 18px">●</span>
                    未派单告警数
                  </div>
                </div>
                <div class="right-item">
                  <div class="right-item-value">
                    {{ alarmStatisticsObj.gCount2 }}
                  </div>
                  <div class="right-item-label">
                    <span style="color: #33a3dc; font-size: 18px">●</span>
                    待处理告警数
                  </div>
                </div>
                <div class="right-item">
                  <div class="right-item-value">
                    {{ alarmStatisticsObj.gCount3 }}
                  </div>
                  <div class="right-item-label">
                    <span style="color: #fa9e26; font-size: 18px">●</span>
                    已处理告警数
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="top-b-2">
            <div class="title">
              <div class="title-left">
                <span class="title-left-text">最近预警事件</span>
                <span
                  style="
                    margin-left: 10px;
                    font-size: 13px;
                    font-weight: 400;
                    color: #636363;
                  "
                  >最近预警事件 10 条</span
                >
              </div>
            </div>
            <div class="top-b-2-content">
              <div style="height: 100%">
                <el-table
                  :data="earlyWarningEventList"
                  stripe
                  style="width: 100%; height: 100%"
                  class="earlyWarningEventTable"
                >
                  <el-table-column type="index" width="50" label="序号" />
                  <el-table-column
                    prop="alertTime"
                    label="告警时间"
                    width="160"
                  />
                  <el-table-column
                    prop="deviceStatus"
                    label="告警类型"
                    width="100"
                  >
                    <template slot-scope="{ row }">
                      <el-tag
                        size="medium"
                        :style="
                          row.deviceStatus
                            | constantKeyTagStyleObj('WARNING_TYPE')
                        "
                        style="height: 26px; line-height: 24px"
                      >
                        {{
                          row.deviceStatus | constantKeyValue('WARNING_TYPE')
                        }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deviceName" label="设备名称" />
                  <el-table-column
                    prop="deviceTypeStr"
                    label="设备类型"
                    width="120"
                  />
                  <el-table-column
                    prop="solveStatus"
                    label="当前状态"
                    width="100"
                  >
                    <template slot-scope="{ row }">
                      <el-tag
                        size="medium"
                        :style="
                          row.solveStatus
                            | constantKeyTagStyleObj('HANDLE_STATUS')
                        "
                        style="height: 26px; line-height: 24px"
                      >
                        {{
                          row.solveStatus | constantKeyValue('HANDLE_STATUS')
                        }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-1">
          <div class="title">
            <div class="title-left">
              <span class="title-left-text">传统消防设备信息</span>
            </div>
          </div>
          <div class="bottom-1-content">
            <div class="content-info">
              <div
                class="info-item"
                v-for="(data, index) in quantityStatisticsList"
                :key="index"
              >
                <div class="device-img">
                  <img :src="data.img" alt="" />
                </div>
                <div class="device-info">
                  <div class="device-label" style="position: relative">
                    {{ data.label }}
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="异常数量=故障数量+反馈数量+启动数量+隔离数量"
                      placement="top"
                    >
                      <i
                        class="el-icon-question"
                        style="
                          position: absolute;
                          top: 1px;
                          color: rgb(255, 153, 0);
                          cursor: pointer;
                        "
                        v-if="data.label == '异常数量'"
                      ></i>
                    </el-tooltip>
                  </div>
                  <div class="device-value">
                    {{ data.value }}
                    <span style="font-size: 14px; font-weight: normal">个</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-2">
          <div class="title">
            <div class="title-left">
              <span class="title-left-text">预警趋势</span>
              <span
                style="
                  margin-left: 10px;
                  font-size: 13px;
                  font-weight: 400;
                  color: #636363;
                "
                >最近 7 天</span
              >
            </div>
          </div>
          <div class="bottom-2-content">
            <div style="flex: 1">
              <div id="keyD" style="height: 100%" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-show="homeType == '地图模式'">
      <Map v-if="homeType == '地图模式'" />
    </div>
  </div>
  <div
    v-else
    style="width: 100%; height: 100%; background: #efefef; padding-top: 10px"
  >
    <EpidemicPreventionHome v-if="systemInfo.name == '防疫防控管理平台'" />
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import dashboardManageApi from '@/api/dashboard-manage'
import deviceManageApi from '@/api/device-manage'
import GaodeMap from '../gaode-map/index'
import Map from './map'
import EpidemicPreventionHome from '../febs/epidemic-prevention-manage/home-page/index'
import { systemInfo } from '@/settings'

export default {
  name: 'Dashboard',
  components: {
    CountTo,
    GaodeMap,
    Map,
    EpidemicPreventionHome,
  },
  data() {
    return {
      systemInfo: systemInfo,
      homeType: '数据模式',
      basicInfoLegend: [
        {
          name: '报警',
          color: '#FA9E26',
          imgName: 'alarm',
        },
        {
          name: '故障',
          color: '#345EBF',
          imgName: 'fault',
        },
        {
          name: '隔离',
          color: '#3675FF',
          imgName: 'quarantine',
        },

        {
          name: '离线',
          color: '#64C3FF',
          imgName: 'off_line',
        },
        {
          name: '正常',
          color: '#36B1FF',
          imgName: 'normal',
        },
      ],
      basicInfoData: {},
      basicInfoDataList: [],
      deviceRecordData: [],
      deviceDetailImg: [
        {
          烟感: 'smoke_sensation',
        },
        {
          温感: 'temperature_sensation',
        },
        {
          天然气: 'natural_gas',
        },
        {
          手报: 'hand_newspaper',
        },
        {
          水浸报警: 'flooding_alarm',
        },
        {
          红外探测: 'infrared_acquisition',
        },
        {
          声光报警: 'audible_visual_alarm',
        },
      ],

      alarmStatisticsType: '今日告警',
      alarmStatisticsObj: {},
      alarmStatisticsData: [],

      deviceDictionaries: [],
      earlyWarningEventList: [],

      quantityStatisticsList: [
        {
          img: this.getImgSrc('fire_engine.png'),
          value: 0,
          label: '消防主机',
        },
        {
          img: this.getImgSrc('transmission_equipment.png'),
          value: 0,
          label: '传输设备',
        },
        {
          img: this.getImgSrc('virtual_gateway.png'),
          value: 0,
          label: '虚拟网关',
        },
        {
          img: this.getImgSrc('wired_probe.png'),
          value: 0,
          label: '有线探点',
        },

        {
          img: this.getImgSrc('device_total.png'),
          value: 0,
          label: '设备总数',
        },
        {
          img: this.getImgSrc('alarm_num.png'),
          value: 0,
          label: '报警数量',
        },
        {
          img: this.getImgSrc('exceptions_num.png'),
          value: 0,
          label: '异常数量',
        },
      ],

      deviceRecordChartList: [],

      alarmTrendData: [],
      chartA: null,
      chartB: null,
      chartD: null,
    }
  },
  mounted() {
    if (this.systemInfo.name != '防疫防控管理平台') {
      this.$nextTick(() => {
        this.chartA = this.getChart('keyA')
        this.chartB = this.getChart('keyB')
        this.chartD = this.getChart('keyD')
      })

      this.getData()
      setInterval(() => {
        this.getData()
      }, 3 * 60 * 1000)
    }
  },
  activated() {
    if (this.systemInfo.name != '防疫防控管理平台') {
      this.getData()
    }
  },
  methods: {
    getChart(id) {
      if (document.getElementById(id)) {
        return echarts.init(document.getElementById(id))
      }
      return null
    },
    toClickHomeType(text) {
      this.homeType = text
      if (this.homeType == '数据模式') {
        this.getData()
      }
    },
    getData() {
      this.getBasicInfoData() // 无线设备信息
      this.getDeviceRecordData() // 无线设备详情
      this.getAlarmStatisticsData() // 告警统计
      this.getDictValueAttr() // 设备类型

      this.getQuantityDeviceData() // 传统消防设备

      this.getAlarmTrendData() // 报警趋势
    },
    // 无线设备信息
    getBasicInfoData() {
      dashboardManageApi.getBasicInfo().then((ret) => {
        this.basicInfoData = ret.data.data[0]
        const data = [
          {
            value: this.basicInfoData['报警'],
          },
          {
            value: this.basicInfoData['故障'],
          },
          {
            value: this.basicInfoData['隔离'],
          },

          {
            value: this.basicInfoData['离线'],
          },
          {
            value: this.basicInfoData['正常'],
          },
          // {
          //   value: this.basicInfoData['未激活'],
          // },
        ]
        data.forEach((ele, idx) => {
          ele.name = this.basicInfoLegend[idx].name
          ele.color = this.basicInfoLegend[idx].color
          ele.imgName = this.basicInfoLegend[idx].imgName
        })
        this.basicInfoDataList = data

        this.updateBasicInfoChartOption()
      })
    },
    updateBasicInfoChartOption() {
      const xAxisData = []
      this.basicInfoLegend.forEach((ele) => {
        xAxisData.push(ele.name)
      })
      const data = this.basicInfoDataList
      const chartData = []
      data.forEach((ele, idx) => {
        chartData.push({
          name: ele.name,
          value: ele.value,
          itemStyle: {
            color: ele.color,
          },
          label: {
            show: true,
            position: 'top',
            fontSize: 13,
            color: ele.color,
          },
        })
      })

      const chartOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: '{a} <br/>{b} : {c}个',
        },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '3%',
          top: 30,
          containLabel: true,
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            fontSize: 14,
            color: '#111111',
            fontWeight: 400,
          },
          axisLine: {
            lineStyle: {
              color: '#999',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 'dataMax',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              formatter: '{value}',
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
              },
            },
          },
        ],
        series: [
          {
            name: '无线设备信息',
            type: 'bar',
            barWidth: 17,
            data: chartData,
          },
        ],
      }
      if (this.chartA) {
        this.chartA.dispose()
      }
      this.$nextTick(() => {
        if (this.getChart('keyA')) {
          this.chartA = this.getChart('keyA')
          this.createChart(this.chartA, chartOption)
        }
      })
    },

    // 无线设备详情
    getDeviceRecordData() {
      dashboardManageApi.getDeviceRecord().then((ret) => {
        if (ret.status === 200) {
          this.deviceRecordData = ret.data.data
          // console.log(ret.data.data)
        }
      })
    },

    // 告警统计
    getAlarmStatisticsData() {
      dashboardManageApi.getAlertFaultWOData().then((ret) => {
        if (this.alarmStatisticsType == '今日告警') {
          this.alarmStatisticsObj = ret.data.data[1]
        } else {
          this.alarmStatisticsObj = ret.data.data[0]
        }

        const data = this.alarmStatisticsObj
        console.log('data', data)

        this.alarmStatisticsData = [
          {
            name: '未派单告警',
            value: data.gCount1,
          },
          {
            name: '待处理告警',
            value: data.gCount2,
          },
          {
            name: '已处理告警',
            value: data.gCount3,
          },
        ]
        this.updateAlarmStatisticsChartOption()
      })
    },
    updateAlarmStatisticsChartOption() {
      const xAxisData = []
      const yAxisData = []
      this.alarmStatisticsData.forEach((ele) => {
        xAxisData.push(ele.name)
        yAxisData.push(ele.value)
      })
      const colorStops = [
        [
          { offset: 0, color: '#4684dc' },
          { offset: 0.7, color: '#88C6FF' },
          { offset: 1, color: '#c7e1f9' },
        ],
        [
          { offset: 0, color: '#33A3DC' },
          { offset: 0.7, color: '#33c1ed' },
          { offset: 1, color: '#33d7f9' },
        ],

        [
          { offset: 0, color: '#FA9E26' },
          { offset: 0.7, color: '#f9d6bb' },
          { offset: 1, color: '#fbf0e6' },
        ],
      ]
      const data = []
      xAxisData.forEach((ele, idx) => {
        const itemStyle = {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: colorStops[idx],
            globalCoord: false, // 缺省为 false
          },
        }

        data.push({
          name: ele,
          value: yAxisData[idx],
          label: {
            normal: {
              show: false,
              // color: 'red',
              color: colorStops[idx][0].color,
              fontSize: 13,
              formatter: '{b}' + '\n' + '{c}({d}%)',
            },
          },
          itemStyle: itemStyle,
        })
      })
      var chartOption = {
        tooltip: {
          trigger: 'item',
          // formatter: '{b}<br />' + seriesName + '：{c}%'
        },
        legend: {
          show: false,
          left: 'left',
          top: 5,
          padding: [5, 30, 0, 0],
          data: xAxisData,
          orient: 'vertical',
        },
        title: {
          text:
            this.alarmStatisticsObj.gCount1 +
            this.alarmStatisticsObj.gCount2 +
            this.alarmStatisticsObj.gCount3,
          subtext: '告警总数',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 20,
            lineHeight: 20,
          },
          subtextStyle: {
            fontSize: 15,
            color: '#555555',
          },
          itemGap: 2,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: 5, // 65 60 30
          containLabel: true,
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '75%'], // ['23%', '45%'] 45%
            avoidLabelOverlap: false,
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      }
      if (this.chartB) {
        this.chartB.dispose()
      }
      this.$nextTick(() => {
        if (this.getChart('keyB')) {
          this.chartB = this.getChart('keyB')
          this.createChart(this.chartB, chartOption)
        }
      })
    },

    // 设备类型
    getDictValueAttr() {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue
        this.getEarlyWarningEventList() // 最新预警事件
      })
    },
    // 最新预警事件
    getEarlyWarningEventList() {
      const data = {
        pageNum: 1,
        pageSize: 10,
        field: 'alertTime',
        order: 'descending',
      }
      dashboardManageApi.getEquipmentCollectAlert(data).then((ret) => {
        this.earlyWarningEventList = ret.data.data.rows

        this.earlyWarningEventList.forEach((ele, i) => {
          this.deviceDictionaries.forEach((ele1, i1) => {
            if (Number(ele.deviceType) === ele1.dictValue) {
              ele.deviceTypeStr = ele1.dictText
            }
          })
        })
      })
    },

    // 传统消防设备
    getQuantityDeviceData() {
      dashboardManageApi.getQuantityDeviceData().then((ret) => {
        const data = ret.data.data
        let total = 0
        data.forEach((ele) => {
          if (ele.gName !== '异常数量' && ele.gName !== '报警数量') {
            total = total + ele.gCount1
          }
        })
        this.quantityStatisticsList.forEach((ele, idx) => {
          if (ele.label == '设备总数') {
            ele.value = total
          } else {
            data.forEach((ele1, idx1) => {
              if (ele.label == ele1.gName) {
                ele.value = ele1.gCount1
              }
            })
          }
        })
      })
    },

    // 报警趋势
    getAlarmTrendData() {
      dashboardManageApi.getAlertTrendData().then((ret) => {
        const list = []
        ret.data.data.forEach((ele) => {
          list.push({
            date: ele.gName,
            value1: ele.gCount1, // 告警
            value2: ele.gCount2, // 故障
          })
        })
        this.alarmTrendData = list
        this.updateAlarmTrendChartOption()
      })

      // var lastMonth = []
      // for (var i = 0; i < 10; i++) {
      //   lastMonth.unshift(
      //     new Date(new Date().setDate(new Date().getDate() - i)).getDate() +
      //       '号'
      //   )
      // }

      // const valueList1 = []
      // for (var i = 0; i < 10; i++) {
      //   valueList1.push(Math.round(Math.random() * 100))
      // }

      // const valueList2 = []
      // for (var i = 0; i < 10; i++) {
      //   valueList2.push(Math.round(Math.random() * 100))
      // }

      // const list = []
      // lastMonth.forEach((ele, idx) => {
      //   list.push({
      //     date: ele,
      //     value1: valueList1[idx],
      //     value2: valueList2[idx],
      //   })
      // })
      // this.alarmTrendData = list
      // this.updateAlarmTrendChartOption()
    },
    updateAlarmTrendChartOption() {
      var legendData = [
        {
          name: '报警',
          textStyle: {
            color: '#FA9E26',
          },
          pageIconColor: '#FA9E26',
          shadowColor: 'rgba(250, 158, 38, 0.77)',
          // textStyle: {
          //   color: '#0063ED',
          // },
          // pageIconColor: '#0063ED',
          // shadowColor: 'rgba(41, 123, 239, 0.77)',
        },
        {
          name: '故障',
          textStyle: {
            color: '#0063ED',
          },
          pageIconColor: '#0063ED',
          shadowColor: 'rgba(41, 123, 239, 0.77)',

          // textStyle: {
          //   color: '#ff3e00',
          // },
          // pageIconColor: '#ff3e00',
          // shadowColor: 'rgba(255, 62, 0, 0.77)',
        },
      ]
      var xAxisData = {
        xAxis: [],
      }
      var yAxisData = {
        yAxis1: [],
        yAxis2: [],
      }
      this.alarmTrendData.forEach((ele, idx) => {
        xAxisData.xAxis.push(ele.date)
        yAxisData.yAxis1.push(ele.value1)
        yAxisData.yAxis2.push(ele.value2)
      })

      var seriesData = []
      legendData.forEach((ele, idx) => {
        var key = 'yAxis' + (idx + 1)
        var itemData = yAxisData[key]

        seriesData.push({
          name: ele.name,
          type: 'line',
          data: itemData,
          smooth: true,
          lineStyle: {
            width: 2,
            shadowColor: ele.shadowColor,
            shadowBlur: 10,
            shadowOffsetX: 3,
            shadowOffsetY: 5,
          },
          itemStyle: {
            color: ele.pageIconColor,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(27, 184, 250, 0)' },
                { offset: 1, color: 'rgba(72, 134, 255, 0.2)' },
              ],
              globalCoord: true, // 缺省为 false
            },
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              color: ele.pageIconColor,
              distance: 2,
            },
          },
        })
      })

      var chartOption = {
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'line',
          // },
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false },
          },
          top: -10,
          right: 20,
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '5%',
          top: '15%',
          containLabel: true,
        },
        legend: {
          left: 'right',
          padding: [2, 10, 2, 10],
          data: legendData,
          itemHeight: 13,
        },
        xAxis: {
          type: 'category',
          data: xAxisData.xAxis,
          boundaryGap: false,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            fontSize: 15,
            // rotate: '45'
          },
        },
        yAxis: [
          {
            type: 'value',
            min: 0,

            max: 'dataMax',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              formatter: '{value}',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
              },
            },
          },
        ],
        series: seriesData,
      }
      if (this.chartD) {
        this.chartD.dispose()
      }
      this.$nextTick(() => {
        if (this.getChart('keyD')) {
          this.chartD = this.getChart('keyD')
          this.createChart(this.chartD, chartOption)
        }
      })
    },

    toClickType(text) {
      this.alarmStatisticsType = text
      this.getAlarmStatisticsData()
    },

    createChart(charts, option) {
      // const charts = echarts.init(document.getElementById(createId))
      charts.setOption(option)
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },

    ChangeDecimalToPercentage(data) {
      if (data) {
        const data1 = (data * 100).toFixed(2) + '%'
        return data1
      } else {
        return '0.00%'
      }
    },
    getImgSrc(imgName) {
      return require(`@/assets/home/${imgName}`)
    },
    getDeviceDetailImg(imgName) {
      let imgUrl = this.getImgSrc('other_device.png')
      this.deviceDetailImg.forEach((ele) => {
        for (const key in ele) {
          if (key == imgName) {
            imgUrl = this.getImgSrc(ele[imgName] + '.png')
          }
        }
      })
      return imgUrl
    },
  },
}
</script>

<style lang="scss" scoped>
@import './style/dashboard-new.scss';
</style>
